<template>
  <div>
    <div class="top">
      <van-icon name="arrow-left" class="callback" @click="callback" />
      <van-search class="search search-box" placeholder="请输入搜索关键词" v-model="value"/>
    </div>
    <div class="van-hairline--bottom title">
      <van-tabs v-model="active">
        <van-tab title="综合"></van-tab>
        <van-tab title="销量"></van-tab>
        <van-tab title="价格">
          <van-row class="stitle bounceInRight animated">
            <van-col span="12">
              <van-button type="danger" size="small" @click.native="descOrder">由高到低 ↓</van-button>
            </van-col>
            <van-col span="12">
              <van-button type="danger" size="small" @click.native="ascOrder">由低到高 ↑</van-button>
            </van-col>
          </van-row>
        </van-tab>
        <van-tab title="筛选"></van-tab>
      </van-tabs>
    </div>
    <div class="goods-list">
      <ul>
        <li @click="goodDetails(list.id)" v-for="list in newList[0]" :key="list.id">
          <div class="list-img"><img :src="list.imgsrc" width="120" height="120" alt=""></div>
          <div class="list-content">
            <p class="list-content-title">{{list.name}}</p>
            <p class="list-content-price">￥{{list.price}}</p>
            <p class="list-content-num">15个人购买过</p>
          </div>
        </li>
      </ul>
    </div>
    <van-icon name="upgrade" @click.native="goTop" class="calltop bounceInRight animated" />
    <!-- <h2>{{id}}</h2>
    <h2>{{cl}}</h2> -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      active: 0,
      value: '',
      cl: '',
      fid: '',
      newList: []
    }
  },
  mounted () {
    // 获取页面传参id
    this.fid = this.$route.query.id
    var id = this.$route.query.id
    // 如果页面没有传参，跳转到分类页
    if (!id) {
      this.$router.push({path: 'Class'});
    }
    var list = this.newList
    // 获取页面传参class
    this.cl = this.$route.query.class
    // 根据传参id展示数组
    this.goods.forEach(function(value,index){
      // console.log(value.id)
      if (value.id == id) {
        // 将符合id条件的数组重新封装成数组 push 给newlist
        list.push(value.sclass)
      }
    })
    // Chrome
    document.body.scrollTop = 0
    // Firefox
    document.documentElement.scrollTop = 0
    // Safari
    window.pageYOffset = 0
  },
  methods: {
    callback () {
      window.history.go(-1)
    },
    // 商品详情页跳转
    goodDetails (id) {
      //获得商品ID
      this.$router.push({path: 'Details', query: {fid: this.fid, id:id}})
    },
    // 商品降序
    descOrder () {
      var list = this.newList[0]
      var temp
      var len = list.length;  
      for (var i = 0; i < len; i++) {  
          for(var j = i + 1; j < len; j++){  
              if(list[i].price < list[j].price){  //相邻元素进行对比  
                  var temp = list[j].price;//交换元素  
                  list[j].price = list[i].price;  
                  list[i].price = temp;  
              }  
          }  
      }
    },
    // 商品升序
    ascOrder () {
      var list = this.newList[0]
      var temp
      var len = list.length;  
      for (var i = 0; i < len; i++) {  
          for(var j = i + 1; j < len; j++){  
              if(list[i].price > list[j].price){  //相邻元素进行对比  
                  var temp = list[j].price;//交换元素  
                  list[j].price = list[i].price;  
                  list[i].price = temp;  
              }  
          }  
      }
    },
    // 返回到顶部
    goTop () {
      document.documentElement.scrollTop = 0
    }
  },
  computed: {
    ...mapState(['goods'])
  }
}
</script>

<style scoped>
.top{
  background: rgb(242, 242, 242);
}
.top .search-box{
  width:90%;
  display: inline-block
}
.top .callback{
  margin-left:1em;
}
.title{
  line-height:40px;
  font-size:0.5em;
}
.title div{
  text-align: center
}
.title .active{
  color:red;
}
.title .stitle a{
  background: rgb(233, 231, 231);
  padding:5px 10px;
  border-radius: 5px;
}
.title .stitle .active{
  background: red;
  color:#fff;
}
.goods-list{
  margin-top: 10px;
  padding-left: 120px;
  position: relative;
}
.goods-list li{
  border-bottom:1px solid rgb(240, 240, 240);
  padding-left:15px;
}
.goods-list .list-img{
  position: absolute;
  left:0;
  width: 120px;
  height: 120px;
  background: red;
}
.goods-list .list-content{
  width: 100%;
  height: 120px;
}
.goods-list p{
  padding:0;margin:0;
}
.list-content-title{
  margin-top:10px !important;
  font-size:1em;
  color:rgb(116, 116, 116);
}
.list-content-price{
  margin-top:50px !important;
  margin-bottom:5px !important;
  color:red;
  font-size:1em;
}
.list-content-num{
  font-size:0.5em;
  color: rgb(184, 184, 184);
}
.calltop{
  font-size:2em;
  color: rgb(134, 134, 134);
  position: fixed;
  right: 20px;
  bottom: 70px;
}
</style>
